<template>
  <el-dialog title="题目预览" v-model="showDialog" :before-close="handleClose">
      <el-row style="margin: 20px;">
        <el-col :span="6"><div class="grid-content ep-bg-purple">【题型】:
          <span>{{$filters.formatQuestionType(data.questionType*1)}}</span>
        </div></el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple-light" >【编号】:{{data.id}}</div></el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple"></div>【难度】:
          <span>{{$filters.formatDifficulty(data.difficulty*1)}}</span>
        </el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple-light">【标签】:{{data.tags}}</div></el-col>
      </el-row>
      <el-row style="margin: 20px;">
        <el-col :span="6"><div class="grid-content ep-bg-purple">【学科】:{{data.subjectID}}</div></el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple-light" >【目录】:{{data.catalogID}}</div></el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple">【方向】:{{data.direction}}</div></el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col><div>【题干】:</div></el-col>
        <el-col><span style="color:blue" v-html="data.question"></span> </el-col>
        <el-col>{{data.questionType}} 选项：(以下选中的选项为正确答案) </el-col>
      </el-row>
      <div v-for="(item,index) in data.options" :key="index">
        <el-radio-group v-model="radios" >
           <el-radio  :label="item.isRight">{{item.title}}</el-radio>
        </el-radio-group>
      </div>
      <hr>
      <el-row>
        <el-col><div>【参考答案】:  <el-button type="danger" @click="showVideo=true">视频答案预览</el-button></div></el-col>
        <div v-if="showVideo">
          <video controls="controls" :src="data.videoURL">
        </video>
      </div>
      </el-row>
      <hr>
      <el-row>
        <el-col><div>【答案解析】: <span v-html="data.answer"></span></div></el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col><div>【题目备注】: {{data.remarks}} </div></el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button @click="onClose">关闭</el-button>
      </el-row>
  </el-dialog>
</template>

<script>
import {
  defineComponent,
  ref,
  toRef,
  watch
} from 'vue'
export default defineComponent({
  components: {},
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  setup (props, { emit }) {
    const showDialog = ref(false)
    const radios = ref(1)
    const showVideo = ref(false)
    // console.log('props.data', props.data)
    /*     watch(props, (val) => {
      console.log('data', val.data.options)
      val.data.options.forEach((t) => {
        if (t.isRight === 1) {
          // radios.value.push(t.isRight)
          // console.log('radios', radios)
        }
      })
    }, {
      deep: true
    }) */
    const radio = ref()
    // 关闭功
    const onClose = () => {
      showVideo.value = false
      emit('close')
    }
    function handleClose () {
      showVideo.value = false
      emit('close')
    }
    return {
      onClose,
      showDialog,
      radios,
      showVideo,
      handleClose

    }
  }
})

</script>
<style lang="less" scoped>

</style>
